<template>
  <div id = "DSL-troubleshooting">
    <div class = "page-header">
      <span class = "title-item">故障处理</span>
      <span class = "download-btn" @click = "export2Excel" v-if = "false">
        <a-icon type = "cloud-download" />导出数据
      </span>
    </div>
    <a-form-model layout="inline" :modal="request" @submit="handleSubmit" @submit.native.prevent :colon="false" style="margin: 10px 0">
      <a-form-model-item label="公司名称">
        <a-input v-model="request.searchKey" placeholder="请输入物公司名称" allowClear class="inputwidth"/>
      </a-form-model-item>
      <a-form-model-item label="进度情况">
        <a-select v-model="request.status" placeholder="请选择进度情况" class="selectwidth" allowClear>
          <a-select-option value="1">未处理</a-select-option>
          <a-select-option value="2">处理中</a-select-option>
          <a-select-option value="3">已处理</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="时间段">
        <a-date-picker v-model="request.startTime" :disabled-date="disabledStartDate" show-time format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间" @openChange="handleStartOpenChange" />
        <span style="color:#9fb043;font-size:18px;padding:0 10px;">—</span>
        <a-date-picker v-model="request.endTime" :disabled-date="disabledEndDate" show-time format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" :open="endOpen" @openChange="handleEndOpenChange" />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" html-type="submit">搜索</a-button>
      </a-form-model-item>
    </a-form-model>
    <my-table :columns = "columns" :data-source = "data" :pagination = "false" :rowKey = "(record) => record.id">
      <template slot = "status" slot-scope = "text, record">
        <span v-if = "record.status == 1">未处理</span>
        <span v-if = "record.status == 2">处理中</span>
        <span v-if = "record.status == 3">处理完毕</span>
      </template>
      <span slot = "action" slot-scope = "text, record" class = "action">
        <a class = "progress" @click = "showModalOf(record)">详情</a>
        <a class = "progress" v-if = "record.status==2" @click = "showModal(record)">处理</a>
      </span>
    </my-table>

    <a-modal v-model = "visible" title = "故障上报" centered width = "30%" :maskClosable = "false">
      <a-form-model :label-col = "{ span: 4 }" :wrapper-col = "{ span: 17 }" :model = "form" ref = "ruleForm" :rules = "ruleForm">
        <a-form-model-item label = "选择型号" :wrapper-col = "{ span: 12 }" :label-col = "{ span: 8 }">
          <a-select allow-clear v-model = "form.version" @change = "onModalList">
            <a-select-option v-for = "(item, index) in ModelList" :key = "index">{{item.name}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label = "备件名称" :wrapper-col = "{ span: 12 }" :label-col = "{ span: 8 }">
          <a-input v-model = "form.name" />
        </a-form-model-item>
        <a-form-model-item label = "更换数量" :wrapper-col = "{ span: 12 }" :label-col = "{ span: 8 }">
          <a-input v-model = "form.number" />
        </a-form-model-item>
        <a-form-model-item label = "单位" :wrapper-col = "{ span: 12 }" :label-col = "{ span: 8 }">
          <a-input v-model = "form.unit" />
        </a-form-model-item>
        <a-form-model-item label = "预计使用寿命(/天)" :wrapper-col = "{ span: 12 }" :label-col = "{ span: 8 }">
          <a-input v-model = "form.useDays" />
        </a-form-model-item>
        <a-form-model-item label = "更换原因" :wrapper-col = "{ span: 12 }" :label-col = "{ span: 8 }">
          <a-textarea v-model = "form.opinion" :rows = "4" />
        </a-form-model-item>
      </a-form-model>

      <template slot = "footer">
        <a-button type = "primary" @click = "confirmSend">确认</a-button>
        <a-button @click = "cancelBtn">取消</a-button>
      </template>
    </a-modal>
    <div class = "bottompage">
      <a-pagination
          v-model = "request.currentPage"
          :defaultPageSize = "request.pageSize"
          :total = "total"
          :show-total = "(total) => `共 ${total} 条记录`"
          :item-render = "itemRender"
          @change = "pagechangeFns"
      />
    </div>
    <a-modal
        v-model = "isShow"
        title = "详情"
        centered
        width = "50%"
        :maskClosable = "true"
        :closable = "true"
        class="detail"
        :footer="null"
    >

      <div class="div_box">
        <div class="div_list"><div>企业</div><div>{{detail.companyName}}</div></div>
        <div class="div_list"><div>排口</div><div>{{detail.monitorFactorsName}}</div></div>
        <div class="div_list"><div>监测项</div><div>{{detail.monitorFactorsName}}</div></div>
        <div class="div_list"><div>异常时间</div><div>{{detail.time}}</div></div>
        <div class="div_list"><div>处理类型</div><div>{{detail.disposeType}}</div></div>
        <div class="div_list"><div>处理进度</div><div>{{detail.status==1?'待处理':detail.status==2?'处理中':'处理完毕'}}</div></div>
        <div class="div_list"><div>更换名称</div><div>{{detail.name}}</div></div>
        <div class="div_list"><div>更换型号</div><div>{{detail.version}}</div></div>
        <div class="div_list"><div>更换数量</div><div>{{detail.number}}</div></div>
        <div class="div_list"><div>更换时间</div><div>{{detail.companyName}}</div></div>
        <div class="div_list"><div>更换原因</div><div>{{detail.opinion}}</div></div>
      </div>

      <template slot = "footer">

      </template>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      moment,
      isShow:false,
      detail:{},
      data: [],
      columns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "id",
          width: "80px",
          align: "center",
          customRender: (text, record, index) =>
              `${
                  (this.request.currentPage - 1) * this.request.pageSize + index + 1
              }`,
        },
        {
          title: "公司名称",
          dataIndex: "companyName",
          align: "center",
        },
        {
          title: "排口",
          dataIndex: "monitorName",
          align: "center",
        },
        {
          title: "监测项",
          dataIndex: "monitorFactorsName",
          align: "center",
        },
        {
          title: "异常时间",
          dataIndex: "time",
          align: "center",
        },
        {
          title: "处理类型",
          dataIndex: "disposeType",
          align: "center",
        },
        {
          title: "进度情况",
          dataIndex: "status",
          align: "center",
          scopedSlots: {customRender: "status"},
        },
        {
          title: "操作",
          width: "150px",
          scopedSlots: {customRender: "action"},
          align: "center",
        },
      ],
      request: {
        //请求参数
        currentPage: 1,
        pageSize: 10,
        searchKey: '',
        status: undefined,
        startTime:null,
        endTime:null
      },
      endOpen:false,  // 日期弹簧开关
      total: 0,
      visible: false,
      userList: [],
      user: "", //用户选中id
      userID: [], //用户参数
      spareID: "", //设备id
      value: [],
      plainOptions: [],
      companyList: [], //公司列表
      monitorList: [], //站点列表
      spareList: [], //设备列表
      form: {
        name: "", //物资名称
        version: " ", //物资型号
        number: " ", //更换数量
        opinion: " ", //更换原因
        breakdownId: " ", //故障解决id
        useDays: null, //预计使用寿命
        unit: " ", //单位
      },
      ModelList: [],
      lastNum: 0, //剩余数量
      forms: {
        applyDetailId: "", //申领库存id
        faultDealId: "",
        userId: "", //当前用户id
      },
      change: {
        company: "",
        monitorName: "",
        current: "1",
        size: "1000",
      },
      key: 1,
      repair: {
        userId: "",
        searchKey: "",
      },
      repairList: [],
      machine: {
        userId: "",
        searchKey: "",
      },
      machineList: [],
      fileList: [],
      uploading: false,
      fileLists: [],
      uploadings: false,
      ruleForm: {
        expectedLife: [
          {
            required: true,
            message: "预计使用寿命必填",
            trigger: "blur",
          },
        ],
      },
      // ruleForms: {
      //   expectedLife: [
      //     {
      //       required: true,
      //       message: "预计使用寿命必填",
      //       trigger: "blur",
      //     },
      //   ],
      // },
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 搜索
    handleSubmit(){
      this.current = 1;
      this.getData()
    },
    // 日期方法
    disabledStartDate(startValue) {
      const endValue = this.request.endTime;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.request.startTime;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    // 日期方法完
    handleChange(value) {
      console.log(`Selected: ${value}`);
      this.userID = value;
      console.log(this.userID);
    },
    //查询记录列表
    getData() {
      let obj = JSON.parse(JSON.stringify(this.request));
      obj.startTime = obj.startTime?new Date(obj.startTime).getTime():null;
      obj.endTime = obj.endTime?new Date(obj.endTime).getTime():null;
      console.log(obj)
      this.$api.getDealInfoList(obj).then((res) => {
        this.data = res.data.data.records;
        this.total = res.data.data.total;
        this.data.forEach((v) => {
          if (v.spendTime != null) {
            v.spendTime = moment(v.spendTime).format("YYYY-MM-DD HH:mm:ss");
          }
          v.time = moment(v.time).format("YYYY-MM-DD HH:mm:ss");
        });
      });
    },
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //分页
    pagechangeFns(page, pageSize) {
      this.request.currentPage = page;
      this.request.pageSize = pageSize;
      this.getData();
    },
    showModalOf(data){
      this.detail=data
      this.$api.getDealInfo(data.id).then(res=>{
        this.detail=Object.assign(this.detail,res.data.data)
        console.log(this.detail)
      })
      this.isShow=true
    },
    //模态框
    showModal(data) {
      this.visible = true;
      this.form.breakdownId = data.id;
      let list = {
        currentPage: 1,
        pageSize: 1000000
      };
      this.$api.getGoodsDir(list).then((res) => {
        this.ModelList = res.data.data.records;
      });
    },

    //确认更换
    confirmSend() {
      if (this.form.spareVersion !== "") {
        console.log(this.form);

        this.$api.addDealInfo(this.form).then((res) => {
          if (res.data.code == 0) {
            this.visible = false;
            this.form = {};
            this.$message.success("上报成功");

            this.getData();
          } else {
            this.$message.info(res.data.errorMessage)
          }
        });
      } else {
        this.$message.info("请选择物资型号");
      }
    },
    //取消
    cancelBtn() {
      this.visible = false;
      this.form = {};
      this.forms = {};
    },

    onModalList(value) {
      this.form.id = this.ModelList[value].id;
      this.form.name = this.ModelList[value].name;
      this.form.unit = this.ModelList[value].unit;
      this.form.useDays = this.ModelList[value].usedays;
      this.form.version = this.ModelList[value].version;
    },
    onChange(checkedValues) {
      console.log("checked = ", checkedValues);
      console.log("value = ", this.value);
    },
  },
  filter: {},
  computed: {},
  watch: {},
};
</script>
<style scoped src = "../../../assets/style/warning.css"></style>
<style scoped lang = "scss">
.div_box{
  display: grid;
}
.div_list{
width: 100%;
  display: flex;
  border: 1px solid #e8e8e8;
  border-bottom: none;

}
.div_list:last-child{
  border-bottom: 1px solid #e8e8e8;

}
.div_list div:first-child{
  padding: 10px;
width: 20%;
  border-right: 1px solid #e8e8e8;
  text-align: center;
}
.div_list div:last-child{
  width: 80%;
  padding: 10px;
}
::v-deep .ant-form-item{
  color: #9fb043;
  font-size: 16px;
}
.disable {
  background-color: #bebebe;
}

::v-deep .anticon svg {
  color: #bebebe;
}

::v-deep .ant-upload-list-item-name {
  color: #bebebe;
}

::v-deep .ant-upload-list-item:hover .ant-upload-list-item-info {
  background-color: #2c6a5f;
}

::v-deep .ant-modal-body {
  padding-top: 0px;
}

.ant-tabs {
  width: 97.9%;
  margin-top: 20px;
  margin-left: 1px;
}

::v-deep .ant-tabs-tab {
  color: #bebebe;
}

::v-deep .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
  color: #9fb043;
}

::v-deep .ant-tabs-nav .ant-tabs-tab:hover {
  color: #9fb043;
}

// ::v-deep .ant-tabs.ant-tabs-card  .ant-tabs-tab-active{
//   color: #9fb043;
// }
::v-deep .ant-tabs-bar {
  border-bottom: 1px solid #3cbda6;
}

::v-deep .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  background: #2c6a5f;
  border: 1px solid #3cbda6;
}

::v-deep .ant-col .ant-form-item-control-wrapper {
  width: 80%;
}

::v-deep .ant-table-tbody > tr > td:nth-child(2) {
  padding: 0px;
  height: 60px;
}

#DSL-troubleshooting {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  .page-header{
    height: auto;
    margin: 0;
    padding: 0;
  }
}

#DSL-troubleshooting .ant-table {
  color: #bebebe;
  font-weight: normal;
  border: 1px solid #2c6a5f;
}

#DSL-troubleshooting .bottompage {
  position: absolute;
  right: 1%;
  bottom: 10px;
}

#DSL-troubleshooting .action {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.progress {
  color: #40a9ff;
  font-size: 16px;
}

.bottompage .ant-pagination-prev .ant-pagination-item-link,
.ant-pagination-next .ant-pagination-item-link {
  border: 0;
  background-color: rgba(30, 50, 48, 0.5);
  box-shadow: 0 0 10px 1px #188471 inset;
}

::v-deep .ant-pagination {
  color: rgba(255, 255, 255, 0.7);
}

//.ant-btn:hover,
//.ant-btn:focus {
//  color: #9fb043;
//}

</style>
